<template>
	<div class="novel">
		<div class="novel-content">
			<YRCardTitle title="笑忘书集"></YRCardTitle>
			<div class="data" v-for="(item,index) in articleList" :key="index">
				<Card  :padding="0">
					<div class="img" @click="toArticleContent(item)" :style="{backgroundImage:'url('+item.cover+')'}"></div>
					<div class="content"> 
						<h1 class="title" @click="toArticleContent(item)">{{item.title}}</h1>
						<p class="desc">{{item.description}}</p>
						<div class="art-footer">
							<time class="bot"><Icon type="ios-calendar-outline" /> {{item.createTime|dateformatDate}}</time>
							<span class="sp">/</span>
							<span class="bot"><Icon type="ios-eye-outline" style="font-size: 24px;vertical-align:-.185em"/> {{item.readNum}}</span>
							<span  class="sp">/</span>
							<span class="bot"><Icon type="ios-heart-outline" /> {{item.likeNum}}</span>
						</div>
					</div>
				</Card>
			</div>
			<Spin size="large" fix v-if="spinShow"></Spin>
		</div>
		<div class="page">
			<Page :total="param.total" :current="param.current" :page-size="param.size" @on-change="getArticlePage"/>
		</div>
	</div>
</template>

<script>
import YRCardTitle from '@/components/common/YRCardTitle.vue'
export default {
  name: 'NovelList',
  components:{
	YRCardTitle
  },
  props: {
	title:String
  },
  data:()=>{
	return{
		param:{
			current:1,
			size:5,
			total:0,
			params:{
				type:2
			}
		},
		articleList:[],
		spinShow:false,//加载中
	}  
  },
  methods:{
	initQueryParam(){
	},
	getArticlePage(current){
		this.initQueryParam();
		this.param.current=current||1;
		this.spinShow = true;
		this.$http.post("/api/article/getArticlePage",this.param).then(res=>{
			this.articleList = res.records;
			this.param.total  = res.total;
			this.spinShow = false;
		})
	},
	toArticleContent(item){
		this.$router.push({path:'/novel/novelContent/',query:{id:item.id}});
	}
  },
  created(){
	this.getArticlePage();
  },
  computed:{
  }
}
</script>

<style scoped="scoped" lang="stylus">
.ivu-card-bordered
	border none
.novel-content
	position relative
	min-height 60vh
	.data
		padding-bottom 20px
		cursor pointer
		.img
			background-image url("http://lang.sliver.fun/dbblog/20190831/b6575b1e9e464192aa73d385976561e8.jpg")
			background-size cover
			background-position center
			width 100%
			height 180px
		.content
			padding 10px
			padding-bottom 5px
			.title
				font-weight 500
				white-space nowrap
				font-size 22px
				display inline
				vertical-align baseline
				transition background-size .3s cubic-bezier(0.215,.61,.355,1)
				background-size 100% 150%
			.title:hover
				background-size 100% 100%
				background-image linear-gradient(to top,transparent,transparent 0,#fd0 0,#fd0 7px,transparent 7px)
			.desc
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color #888
				padding-top 10px	
			.art-footer
				width 100%
				height 35px
				display flex
				align-items center
				.sp
					padding-right 10px
				.bot 
					line-height 35px
					color #8f8f8f
					font-size 14px
					padding-right 10px
					cursor pointer
					.ivu-icon
						font-size 1.25rem
.page
	width 100%
	text-align center
</style>
